<template>
  <div vloading="delLoading">
    <Search :search="search" :reset="reset">
      <template v-slot:body>
        <el-form-item label="系统参数名称" prop="argument_name">
          <el-input v-model="query.argument_name" name="argument_name" clearable />
        </el-form-item>
        <!-- <el-form-item label="权限状态" prop="switch">
           <el-select v-model="query.switch" placeholder="请选择权限" clearable>
            <el-option label="开启" value="1" />
            <el-option label="关闭" value="0" />
            <el-option label="全部" value="" />
          </el-select> 
        </el-form-item> -->
      </template>
    </Search>

    <div class="table-default">
      <bro1 ref="bro1Ref"></bro1>
      <bro2 ref="bro2Ref" :status="status"></bro2>
      <Operate :show="open"> </Operate>
      <!-- 新增 -->
      <el-table :data="tableData" class="mt-3" v-loading="loading" border>
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column prop="argument_code" label="参数代码" />
        <el-table-column prop="argument_name" label="参数名称" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="switch" label="权限">
          <template #default="scope">
            <el-switch v-model="scope.row.switch" class="ml-2" disabled :active-value="activeValue" :inactive-value="inactiveValue" style="--el-switch-on-color: #13ce66; "/>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="创建者" />
        <el-table-column prop="modifier.username" label="修改者" />
        <el-table-column prop="created_at" label="创建时间" />
        <el-table-column prop="updated_at" label="修改时间" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <!-- <Show  @click="open(scope.row.id)"/> -->
            <Update @click="open(scope.row.id)"  />
            <Destroy @click="destroy(api, scope.row.id)"  />
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>

    <Dialog v-model="visible" :title="title" destroy-on-close>
      <Create @close="close(reset)" :primary="id" :api="api" />
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, reactive, provide } from 'vue'
import Create from './create.vue'
import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useOpen } from '/admin/composables/curd/useOpen'
import http from '/admin/support/http'
import { ElMessage } from 'element-plus'
import { setTableHeight } from '/admin/utils/setHeight.js'

export type ProvideRefs = ()=>{
  Bro1:InstanceType<typeof bro1>
  Bro2:InstanceType<typeof bro2>
}

import bro1 from './bro1.vue'
import bro2 from './bro2.vue'

const bro1Ref = ref()
const bro2Ref = ref()

const status = ref(true)

provide('provideRefs',()=>({
  Bro1:bro1Ref.value,
  Bro2:bro2Ref.value
}))





const api = 'systemsetting/systemse'

const { data, query, search, reset, loading } = useGetList(api, false)
const { destroy, deleted,delLoading } = useDestroy()
const { open, close, title, visible, id } = useOpen()

const tableData = computed(() => data.value?.data)
const activeValue = ref(1)
const inactiveValue = ref(0)
const getPrint = arr => {
  const data = {
    id: arr,
  }
  console.log(data)

  http.post('/warehouse/Printinterface', data).then(r => {
    console.log(r)
    let res = r.data.data
    ElMessage.success(res.message)
    // barcodeList.value = res.data
  })
}

onMounted(() => {
  search()
  deleted(reset)
  setTableHeight('.table-default')
})
</script>

<style>
.el-table {
  height: 80%;
}
</style>
